1
00:00:00,730 --> 00:00:07,870
Oké, dus nu we ons collectievoorbeeld hebben, moeten we gaan kijken naar het samenstellen van ons menu-item

2
00:00:07,870 --> 00:00:18,760
component zodat we weten dat onze menu-itemcomponent zowel uit een afbeelding als een titel zal bestaan,

3
00:00:19,120 --> 00:00:23,890
een prijs, en deze knop waarmee we deze aan de winkelwagen kunnen toevoegen.

4
00:00:24,710 --> 00:00:29,620
Nu gaan we nog geen functionaliteit toevoegen.

5
00:00:29,890 --> 00:00:32,950
We hebben er nog niet echt over nagedacht hoe we met ons karretje moeten omgaan.

6
00:00:33,730 --> 00:00:37,060
Maar laten we eerst dit onderdeel uitbouwen.

7
00:00:37,900 --> 00:00:43,330
Laten we dus een verzamelitem toevoegen aan onze componenten.

8
00:00:44,660 --> 00:00:50,500
En in onze map gaan we hetzelfde doen als met onze collectie-itemcomponenten

9
00:00:51,830 --> 00:01:02,600
en dan onze puntstijlen uit de collectie-items die ons vragen: hoe vaker u dit typt, hoe beter u wordt

10
00:01:02,600 --> 00:01:02,840
erbij.

11
00:01:03,650 --> 00:01:10,070
Wat altijd echt interessant is, is dat het in eerste instantie altijd een beetje repetitief lijkt, maar

12
00:01:10,460 --> 00:01:17,570
je merkt eigenlijk dat je uiteindelijk echt alles onthoudt en wat het doel ervan is, des te meer

13
00:01:17,570 --> 00:01:22,730
je oefent met het typen van dezelfde mapstructuur voor je componenten en wat je ermee moet doen.

14
00:01:23,380 --> 00:01:26,240
Oké, dus nu ons collectie-item.

15
00:01:26,540 --> 00:01:32,660
We weten dat we bepaalde dingen nodig hebben om ons menu-item populair te maken, maar dat is niet nodig

16
00:01:32,660 --> 00:01:33,260
welke staat dan ook.

17
00:01:33,620 --> 00:01:36,830
Laten we dus nog een functioneel onderdeel maken.

18
00:01:37,670 --> 00:01:43,970
CONSED-collectie-item is dus gelijk aan deze functionele component.

19
00:01:45,520 --> 00:01:48,640
Retourneert deze Divx met onze klassenaam.

20
00:01:50,210 --> 00:01:56,150
Verzamelitem, en dan gaan we er een div aan geven.

21
00:01:57,190 --> 00:02:04,470
En nu DivX onze image gaat bewaren, laten we het voorlopig de klassenaam image geven.

22
00:02:06,020 --> 00:02:07,190
En laten we.

23
00:02:08,250 --> 00:02:15,630
Doe hetzelfde als voorheen met onze directory-items, zodat we weten waar we heen gaan

24
00:02:15,630 --> 00:02:17,580
passeren zal een.

25
00:02:18,600 --> 00:02:20,550
Wij krijgen ook onze naam.

26
00:02:21,700 --> 00:02:25,750
We krijgen onze prijs en onze afbeeldings-URL, en we hebben deze allemaal.

27
00:02:26,820 --> 00:02:34,920
Toen we die gegevens eerder in onze collectie of sorry hadden ingevoerd, op onze winkelpagina, rechtstreeks in onze winkel

28
00:02:34,920 --> 00:02:39,960
gegevens specifiek, dus we hebben een ID-naam, afbeelding en prijs nodig.

29
00:02:41,880 --> 00:02:44,370
Nu gaan we dat doen.

30
00:02:46,740 --> 00:02:54,510
Voeg in wat we eerder deden met onze stijl en we gaan de achtergrondafbeelding naar onze string doen

31
00:02:54,510 --> 00:02:57,150
interpolatiewaarde van.

32
00:02:58,470 --> 00:02:59,950
Stel je voor, Earl.

33
00:03:01,590 --> 00:03:08,930
Dus hier is nog niets nieuws, en dan gaan we nog een d'Hiv toevoegen en hier gaan we toevoegen

34
00:03:08,940 --> 00:03:10,440
onze collectie voor.

35
00:03:11,500 --> 00:03:11,920
Nu.

36
00:03:13,020 --> 00:03:14,190
Binnenkant van onze Futter.

37
00:03:15,630 --> 00:03:22,710
We hebben dit een dubbele herhaling, eigenlijk hebben we deze afsluitende tag niet eens nodig, we gaan meenemen

38
00:03:22,710 --> 00:03:27,960
in onze tijd, wat onze naam zal zijn.

39
00:03:29,100 --> 00:03:32,040
Evenals onze.

40
00:03:35,430 --> 00:03:36,000
Geweldig.

41
00:03:36,070 --> 00:03:39,530
Oké, laten we dit nu exporteren.

42
00:03:41,740 --> 00:03:47,140
En laten we de sterren binnenhalen die we voor dit onderdeel hebben, dus ik heb ze al voor ons geschreven,

43
00:03:47,140 --> 00:03:49,900
maar we kunnen snel kijken wat ze zijn.

44
00:03:53,200 --> 00:03:59,150
Binnenin ons collectie-item stylen we ons beeld zo dat de hoogte vijfennegentig procent is.

45
00:03:59,950 --> 00:04:05,980
Dat betekent nu dat onze collectie voor foto's vijf procent van de totale hoogte van onze foto's zal bedragen

46
00:04:05,980 --> 00:04:08,380
collectie-item, dat 350 pixels zal zijn.

47
00:04:09,470 --> 00:04:14,510
Dit wordt dus vrijwel de lay-out voor ons eigenlijke onderdeel, wat we hier zien.

48
00:04:16,050 --> 00:04:23,760
Een belangrijk ding om op te merken is dat de column van deze Fleck over ons collectie-item dit in wezen mogelijk maakt

49
00:04:23,760 --> 00:04:27,510
onze Futter en ons imago om in een verticale uitlijning te zitten.

50
00:04:27,700 --> 00:04:28,080
Rechts.

51
00:04:29,130 --> 00:04:35,250
En dan is onze collectie, Futter, gewoon onze reguliere displayflex, en dan hebben we wat ruimte ertussen

52
00:04:35,250 --> 00:04:43,530
zodat onze inhoud uit elkaar wordt geduwd, neemt onze titel 90 procent van de ruimte in ons totaal in beslag

53
00:04:43,530 --> 00:04:46,340
footer en dan wordt de prijs 10 procent.

54
00:04:46,350 --> 00:04:52,170
Dus omdat onze prijs waarschijnlijk nooit zo hoog zal worden, moeten we ervoor zorgen dat we die hebben

55
00:04:52,170 --> 00:04:54,720
naam neemt hier het grootste deel van de ruimte in beslag.

56
00:04:56,140 --> 00:04:56,680
OK.

57
00:04:57,580 --> 00:05:07,600
Als we nu ons collectie-item importeren in ons collectievoorbeeld, zodat we er toegang toe hebben.

58
00:05:08,760 --> 00:05:10,950
Het nieuwe collectie item dat we schreven.

59
00:05:15,370 --> 00:05:25,030
We kunnen nu, in plaats van de stiv te doen, het gewoon zo in kaart brengen en omdat we de eigenschappen nodig hebben

60
00:05:25,030 --> 00:05:30,220
op het item dat we eerder hadden, gaan we gewoon doen wat we eerder deden.

61
00:05:31,410 --> 00:05:37,920
En we gaan onze identiteit herstructureren, maar we gaan ook de rest van ons item herstructureren

62
00:05:37,920 --> 00:05:43,020
rekwisieten en geef dat zo door.

63
00:05:44,030 --> 00:05:46,430
Laten we andere item-rekwisieten doen.

64
00:05:48,280 --> 00:05:48,670
WAP's.

65
00:05:49,650 --> 00:05:52,080
En nu is het geen div meer.

66
00:05:54,580 --> 00:06:01,480
Zorg er wel voor dat u onze andere item-rekwisieten D-structureert of verspreidt in ons collectie-item.

67
00:06:03,460 --> 00:06:06,250
Oh, we moeten ook een collectiepreview starten.

68
00:06:08,320 --> 00:06:11,020
Dus die stijlen zijn hier beneden.

69
00:06:14,610 --> 00:06:16,250
Oké, daar gaan we.

70
00:06:17,310 --> 00:06:22,800
Dus we hebben onze prijs en we hebben ons ding, want er komt geen styling door, laten we het gewoon inspecteren

71
00:06:22,800 --> 00:06:24,960
snel en kijk of we iets missen.

72
00:06:25,380 --> 00:06:31,260
Dus terwijl u codeert, ziet u dit misschien gebeuren. U wilt er alleen zeker van zijn dat onze naamgeving correct is

73
00:06:31,260 --> 00:06:33,150
voor alles en we krijgen de stylus.

74
00:06:33,870 --> 00:06:37,470
Ik zie dus niet dat de sterren die we schreven hier worden toegepast.

75
00:06:39,210 --> 00:06:45,450
Hoewel we hier het werkelijke beeld krijgen dat zo wordt weergegeven.

76
00:06:47,700 --> 00:06:52,550
Oh, ik zie onze collectieprevue, ons collectieitem.

77
00:06:54,070 --> 00:06:55,390
Oh, we hebben niet gered.

78
00:06:58,230 --> 00:06:59,130
Dwaze fouten.

79
00:06:59,820 --> 00:07:08,100
Dus als je soms even in je dev-tools kijkt, kun je heel gemakkelijk zien waar misschien

80
00:07:08,100 --> 00:07:14,760
we gaan de fout in omdat we zeker weten dat, vanwege de manier waarop de reactie is opgezet, alles zou moeten gebeuren

81
00:07:14,760 --> 00:07:16,460
op een bepaald tijdstip aanwezig zijn.

82
00:07:16,470 --> 00:07:20,680
Dus als het niet wordt geladen, hebben we waarschijnlijk onze import verpest.

83
00:07:20,700 --> 00:07:22,920
Juist, wat we eerst hebben gecontroleerd.

84
00:07:22,930 --> 00:07:23,210
Rechts.

85
00:07:23,220 --> 00:07:27,060
We zorgden ervoor dat we het juiste collectie-item importeerden, en dat deden we ook.

86
00:07:27,720 --> 00:07:31,620
En toen controleerden we of onze naam leek op onze klasnaam.

87
00:07:31,620 --> 00:07:32,070
Juist.

88
00:07:32,520 --> 00:07:34,650
Wat we deden.

89
00:07:35,580 --> 00:07:38,190
Dus toen bleek dat we het niet hadden opgeslagen.

90
00:07:38,220 --> 00:07:41,580
Het is dus een domme fout, maar er zijn er heel veel.

91
00:07:41,580 --> 00:07:47,010
Als je een professionele ontwikkelaar wordt, zul je vaak merken dat je alleen maar met je ding bezig bent

92
00:07:47,010 --> 00:07:52,360
ga 30 minuten tegen de muur staan, om er vervolgens achter te komen dat je een kleine typefout hebt gemaakt.

93
00:07:52,740 --> 00:07:58,440
Het is heel gebruikelijk, maar zomaar hebben we nu onze collectiecomponent.

94
00:08:00,220 --> 00:08:06,790
Het enige dat we dus missen is het hover-effect met de knop Toevoegen, maar dat kunnen we zo meteen toevoegen

95
00:08:06,790 --> 00:08:12,150
later, wanneer we onze winkelwagen daadwerkelijk uitbouwen, want daar zal die functie aan gekoppeld zijn.

96
00:08:12,850 --> 00:08:19,810
En nog één ding voordat we onze code committen: we moeten een klein beetje opvulling toevoegen aan onze overall

97
00:08:19,810 --> 00:08:24,090
project, zodat het hier dichter bij aansluit.

98
00:08:24,550 --> 00:08:33,590
Dus laten we naar onze app gaan, DOT-succes, en laten we 20 pixels en 80 pixels opvullen.

99
00:08:34,240 --> 00:08:38,230
Dus ik wil 20 pixels aan de boven- en onderkant en dan 80 pixels aan de zijkant.

100
00:08:38,380 --> 00:08:39,160
En nu.

101
00:08:40,100 --> 00:08:41,180
Het lijkt dichterbij.

102
00:08:42,240 --> 00:08:48,600
Dit kan dus iets meer zijn dan wat we hadden, dus laten we er misschien 60 pixels van maken.

103
00:08:52,320 --> 00:08:52,860
Het is een stuk beter.

104
00:08:53,220 --> 00:08:53,790
Dat is best goed.

105
00:08:54,480 --> 00:08:55,600
Laten we nu onze code committen.

106
00:08:56,070 --> 00:08:57,360
Laten we teruggaan naar onze terminal.

107
00:08:58,580 --> 00:09:04,740
Laten we het doen, oké, laten we eens kijken wat we eerst moeten doen.

108
00:09:05,030 --> 00:09:08,750
Oké, en laten we ons dan engageren.

109
00:09:10,570 --> 00:09:14,590
Onze app updaten met een winkelpagina.

110
00:09:15,870 --> 00:09:21,810
Collectie-, preview-component en collectie-itemcomponent.

111
00:09:23,010 --> 00:09:26,220
En laten we nu gewoon de push origin master halen.

112
00:09:27,930 --> 00:09:29,590
Oké, onze code is actief.

113
00:09:29,850 --> 00:09:31,050
Laten we nu verder gaan.